home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Mouse and Cursor / cursor-trailer-text.izs < prev    next >
Text File  |  2005-09-02  |  6KB  |  220 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Cursor Trailer Text
  4. <!/TITLE>
  5.  
  6. <!BROWSER>IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION> It used to be that a mouse cursor was just a mouse cursor. Since DHTML came along and gave programmers the ability to track the precise coordinates of the mouse, it was only a matter of time that cursor effects started showing up. This is Peter's great cursor text effect. It's pretty self explanatory, not to mention awesome!
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>mouse and cursor<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Insert the below inside the <head> section of the page: -->
  16. <style>
  17. .spanstyle {
  18.     position:absolute;
  19.     visibility:visible;
  20.     top:-50px;
  21.     font-size:10pt;
  22.     font-family:Verdana;
  23.       font-weight:bold;
  24.     color:black;
  25. }
  26. </style>
  27. <script>
  28.  
  29. /*
  30. Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/)
  31. Permission given to Dynamicdrive.com to feature script in it's archive.
  32. For full source code, installation instructions, and 1000's more DHTML scripts,
  33. visit http://dynamicdrive.com
  34. */
  35.  
  36. var x,y
  37. var step=20
  38. var flag=0
  39.  
  40. // Your snappy message. Important: the space at the end of the sentence!!!
  41. var message="DYNAMIC DRIVE! "
  42. message=message.split("")
  43.  
  44. var xpos=new Array()
  45. for (i=0;i<=message.length-1;i++) {
  46.     xpos[i]=-50
  47. }
  48.  
  49. var ypos=new Array()
  50. for (i=0;i<=message.length-1;i++) {
  51.     ypos[i]=-50
  52. }
  53.  
  54. function handlerMM(e){
  55.     x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
  56.     y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
  57.     flag=1
  58. }
  59.  
  60. function makesnake() {
  61.     if (flag==1 && document.all) {
  62.         for (i=message.length-1; i>=1; i--) {
  63.                xpos[i]=xpos[i-1]+step
  64.             ypos[i]=ypos[i-1]
  65.         }
  66.         xpos[0]=x+step
  67.         ypos[0]=y
  68.     
  69.         for (i=0; i<message.length-1; i++) {
  70.             var thisspan = eval("span"+(i)+".style")
  71.             thisspan.posLeft=xpos[i]
  72.             thisspan.posTop=ypos[i]
  73.         }
  74.     }
  75.     
  76.     else if (flag==1 && document.layers) {
  77.         for (i=message.length-1; i>=1; i--) {
  78.                xpos[i]=xpos[i-1]+step
  79.             ypos[i]=ypos[i-1]
  80.         }
  81.         xpos[0]=x+step
  82.         ypos[0]=y
  83.     
  84.         for (i=0; i<message.length-1; i++) {
  85.             var thisspan = eval("document.span"+i)
  86.             thisspan.left=xpos[i]
  87.             thisspan.top=ypos[i]
  88.         }
  89.     }
  90.         var timer=setTimeout("makesnake()",30)
  91. }
  92.  
  93. </script>
  94. <!-- Step 2: Add the below anywhere inside the <body> section of the page: -->
  95. <script>
  96. <!-- Beginning of JavaScript -
  97.  
  98. for (i=0;i<=message.length-1;i++) {
  99.     document.write("<span id='span"+i+"' class='spanstyle'>")
  100.     document.write(message[i])
  101.     document.write("</span>")
  102. }
  103.  
  104. if (document.layers){
  105.     document.captureEvents(Event.MOUSEMOVE);
  106. }
  107. document.onmousemove = handlerMM;
  108.  
  109. // - End of JavaScript - -->
  110. </script>
  111. <!-- Step 3: Finally, what's left now is to insert the following BODY onload event handler inside the <body> tag itself: -->
  112. <body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
  113. <!-- END OF SCRIPT -->
  114. <!/SCRIPT>
  115.  
  116. <!PREVIEW>
  117. <!-- START OF SCRIPT -->
  118.  
  119. <!-- Step 1: Insert the below inside the <head> section of the page: -->
  120. <style>
  121. .spanstyle {
  122.     position:absolute;
  123.     visibility:visible;
  124.     top:-50px;
  125.     font-size:10pt;
  126.     font-family:Verdana;
  127.       font-weight:bold;
  128.     color:black;
  129. }
  130. </style>
  131. <script>
  132.  
  133. /*
  134. Cursor Trailor Text- By Peter Gehrig (http://www.24fun.ch/)
  135. Permission given to Dynamicdrive.com to feature script in it's archive.
  136. For full source code, installation instructions, and 1000's more DHTML scripts,
  137. visit http://dynamicdrive.com
  138. */
  139.  
  140. var x,y
  141. var step=20
  142. var flag=0
  143.  
  144. // Your snappy message. Important: the space at the end of the sentence!!!
  145. var message="DYNAMIC DRIVE! "
  146. message=message.split("")
  147.  
  148. var xpos=new Array()
  149. for (i=0;i<=message.length-1;i++) {
  150.     xpos[i]=-50
  151. }
  152.  
  153. var ypos=new Array()
  154. for (i=0;i<=message.length-1;i++) {
  155.     ypos[i]=-50
  156. }
  157.  
  158. function handlerMM(e){
  159.     x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
  160.     y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
  161.     flag=1
  162. }
  163.  
  164. function makesnake() {
  165.     if (flag==1 && document.all) {
  166.         for (i=message.length-1; i>=1; i--) {
  167.                xpos[i]=xpos[i-1]+step
  168.             ypos[i]=ypos[i-1]
  169.         }
  170.         xpos[0]=x+step
  171.         ypos[0]=y
  172.     
  173.         for (i=0; i<message.length-1; i++) {
  174.             var thisspan = eval("span"+(i)+".style")
  175.             thisspan.posLeft=xpos[i]
  176.             thisspan.posTop=ypos[i]
  177.         }
  178.     }
  179.     
  180.     else if (flag==1 && document.layers) {
  181.         for (i=message.length-1; i>=1; i--) {
  182.                xpos[i]=xpos[i-1]+step
  183.             ypos[i]=ypos[i-1]
  184.         }
  185.         xpos[0]=x+step
  186.         ypos[0]=y
  187.     
  188.         for (i=0; i<message.length-1; i++) {
  189.             var thisspan = eval("document.span"+i)
  190.             thisspan.left=xpos[i]
  191.             thisspan.top=ypos[i]
  192.         }
  193.     }
  194.         var timer=setTimeout("makesnake()",30)
  195. }
  196.  
  197. </script>
  198. <!-- Step 2: Add the below anywhere inside the <body> section of the page: -->
  199. <script>
  200. <!-- Beginning of JavaScript -
  201.  
  202. for (i=0;i<=message.length-1;i++) {
  203.     document.write("<span id='span"+i+"' class='spanstyle'>")
  204.     document.write(message[i])
  205.     document.write("</span>")
  206. }
  207.  
  208. if (document.layers){
  209.     document.captureEvents(Event.MOUSEMOVE);
  210. }
  211. document.onmousemove = handlerMM;
  212.  
  213. // - End of JavaScript - -->
  214. </script>
  215. <!-- Step 3: Finally, what's left now is to insert the following BODY onload event handler inside the <body> tag itself: -->
  216. <body onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">
  217. <!-- END OF SCRIPT -->
  218. <!/PREVIEW>
  219.  
  220. <!RELATED>NONE<!/RELATED>